<template>
  <div class="home-page pl24 pr24 pt35">
     <div class="header dis-sp mt15">
        <div class="rx-sc">
          <div class="company-header">
            <div class="company-header-img" :style="{backgroundImage:'url('+exclude.infoImg+')'}"></div>
          </div>
          <div class="ml10">
            <div class="company-name ft32 fwb pl20">{{exclude.infoName}}</div>
            <div class="company-follow ft24 mt10">
              <span class="fwb mr5">{{exclude.infoFollow}}</span><span>关注数</span>
            </div>
          </div>
        </div>
        <div> 
          <div class="is-follow ft24" @click="followMerchant">{{exclude.hasFollow?'已关注':'关注'}}</div>
          <div class="go-follow ft24 mt10" @click="onFollowBox">关注公众号</div>
        </div>
      </div>
      <div class="company-describe ft24 mt22 pb20 mb20">{{exclude.infoIntroduction}}</div>
      <div class="" v-if="activityLi.length>0">
        <div class="live-room mt12"  v-for="(item,index) in activityLi" :key="index" @click="goLiveRoom(item.cid)">
          <div class="live-room-img" :style="{backgroundImage:'url('+item.liveCover+')'}"></div>
          <div class="live-room-content">
            <div class="live-room-title">{{item.liveName}}</div> 
            <div class="live-room-record dis-sp">
              <div class="live-room-status"><img v-if="item.state == 1" class="living-icon" src="../assets/home/living.png"><a :class="item.state == 1?'cor-DB1919':''">{{item.state == 1?'直播中':'回放'}}</a><span>{{item.liveVisit}}观看</span></div>
              <div class="live-room-time ft12">{{item.cTime}}</div>
            </div>
          </div>
        </div>
      </div>
      <div id="data-list-box" v-if="activityLi.length==0">
        <noData :tipsText="tipsText"></noData>
      </div>

      <div class="panelBox" :class="followShow?'on':''" v-if="followShow">
          <div class="maskBg" @click="onCloesd"></div>
          <div class="contBox">
            <div class="ewm"><img style="-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;" :src="exclude.infoOfficial" id="ewmImg"></div>
            <div class="tex">关注公众号获取更多资讯</div>
            <!-- <div class="btns" ><a :href="exclude.infoOfficial">保存本地</a></div> -->
            <div class="btns" ><span @click="downloadCodeImg(exclude.infoOfficial,'qrCode')">保存本地</span></div>
          </div>
      </div>


     
    <!-- <Footer /> -->
  </div> 
</template>

<script >
import Footer from "@/layout/footer/index.vue";
import $api from "@/api/index";
import { Toast } from "vant";
import {getMerchantsId,getToken} from "@/utils/auth";
import noData from "@/components/noData"

export default {
  name: "home",
  components: {
    Footer,
    noData
  },
  data() {
    return {
      tipsText:'暂时还没有直播间可观看哦',
      exclude:{},
      activityLi:[],
      followShow:false
    };
  },
  methods: {
    downloadCodeImg(imgsrc, name) {//下载图片地址和图片名
  var image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
  
    var a = document.createElement("a"); // 生成一个a元素
    var event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "photo"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
},
    getExcludeInfo(){
      $api.homeApi.excludeInfo({mid:getMerchantsId()}).then(res=>{
        if(res.status == 10000){
          this.exclude = res.data
        }
        console.log(res)
      })
    },
    activityList(){
      $api.homeApi.getActivityList({page:0,size:10,mid:getMerchantsId()}).then(res=>{
        this.activityLi = res.data.content
      })
    },
    followMerchant(){
      if(this.exclude.hasFollow){
        Toast({
          message: '已关注,无需重复关注',
        });
        return
      }
      $api.homeApi.follow({mid:getMerchantsId()}).then(res=>{
        if(res.status == 10000){
          this.getExcludeInfo()
          Toast({
            message: '关注成功',
          });
        }
      })
    },
    onFollowBox(){
      this.followShow = !this.followShow
    },
    goLiveRoom(cid){
      let params = {
        id:cid,
        openId:getToken()
      }
      this.$router.push({path:'liveRoom',query: params})
    },
    onCloesd(){
      this.followShow = false
    },
    onSave(){// 创建下载任务
    }
  },
  created(){
    this.getExcludeInfo()
    this.activityList()
  }
};
</script>
<style lang="scss" scoped>
  .home-page {
    height: calc(100vh - 35px - 120px);
    padding-bottom: 20px;
    overflow: auto;
    background: #F2F5F4;

    .header {
      position: relative;
      z-index: 4;
      .company-header {
        width: 108px;
        height: 108px;

        .company-header-img {
          border-radius: 50%;
          width: 104px;
          height: 104px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }
      }
      .company-name {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .is-follow {
        width:168;
        height: 48px;
        line-height: 48px;
        text-align: center;
        border-radius: 28px;
        color: #DB1919;
        border: 1px solid #DB1919;
      }
      .go-follow {
        width: 168px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        border-radius: 24px;
        color: #333333;
        border: 1px solid #333333;
      }
    }

    .company-describe {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #656666;
    }
    
    .live-room {
      .live-room-img {
        height: 400px;
        // background-image: url('../assets/home/promoter.png');
        border-radius: 32px 32px 0px 0px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        // img {
        //   border-radius: 16px 16px 0px 0px;
        // }
      }
      .live-room-content {
        border-radius: 0 0 24px 24px;
        background: #fff;
        padding: 28px 24px;
        .live-room-title {
          color: #353637;
          font-weight: 500;
          font-size: 32px;
        }
        .live-room-record {
          margin-top: 16px;
        }
        .live-room-status {
          font-size: 24px;
          color: #C78D19;
          span{
            margin-left: 34px;
            color: #969998;
          }
        }
        .live-room-time {
          color: #969998;
        }
      }
      .living-icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }
    }
    .panelBox{
      width: 100%;
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      background: #F2F5F4;
      opacity: 0;
      transition-duration: 3s;
      transition-timing-function: ease-in;
      &.on{
        opacity: 1;
      }
      .maskBg{
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.45);
      }
      .contBox{
        position: relative;
        z-index: 3;
        top: 0;
        height: 656px;
        padding-top: 180px;
        background: #F2F5F4;
        border-radius: 0 0 32px 32px;
        overflow: hidden;
        text-align: center;
        .ewm{
          width: 360px;
          height: 360px;
          margin: 56px auto 24px;
          background: #ffffff;
          overflow: hidden;
          img{
            width: 100%;
          }
        }
        .tex{
          height: 40px;
          line-height: 40px;
          font-size: 28px;
          font-weight: 400;
          color: #666666;
        }
        .btns{
          margin:48px auto 0;
          width: 260px;
          height: 80px;
          border-radius: 8px;
          border: 2px solid #DB1919;
          font-size: 28px;
          font-weight: 500;
          color: #DB1919;
          line-height: 80px;
          font-weight: bold;
        }
      }
    }
  }
  .cor-DB1919{
    color: #DB1919 !important;
  }
</style>
